import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from '../vuex'
// import Vuex from '@/vuex'

// import a from '../store/a.js';可以通过引入使用

import { createLogger } from 'vuex' //打印日志插件
Vue.use(Vuex) // 默认会执行当前插件的install方法

//监听数据的变化
function logger(store) {
  //发布订阅
  store.subscribe((mutation, newState) => {//每次调用mutation，此方法都会执行
    console.log(mutation, newState)
  })
}
function persists(store) {//7 持久化
  let local = localStorage.getItem('Vuex:State')
  if (local) {
    //替换状态的API
    store.replaceState(JSON.parse(local));//会用local替换掉所有的状态
  }
  store.subscribe((mutation, state) => {
    //这里需要做节流 throttle lodash
    localStorage.setItem('Vuex:State', JSON.stringify(state))
  })
}
// 通过Vue中的一个属性 Store 创建一个store的实例
export default new Vuex.Store({
  //vue-persists npm install --save vuex-persist
  plugins: [
    //createLogger(), //原生的日志插件
    //logger,         //自己写的日志插件
    //persists,       //持久化会影响数据更新
  ],
  state: { // 单一数据源
    age: 10
  },
  //strict:true,//严格模式，如果不是在mutations中操作的状态会发生警告，mutations里有异步也会报警告的
  getters: { //2 类似计算属性
    myAge(state) {
      return state.age + 20
    }
  },
  mutations: { //1 这里更改状态只能采用同步
    syncChange(state, payload) { // 修改状态的方法，同步的更改
      //setTimeout(()=>{//开启strict严格模式不支持异步，actions里提交到这个方法发现有异步还是会报警告的
        state.age += payload
        console.log('syncChange')
      //},1000)
    }
  },
  actions: { //2 异步更改
    asyncChange({ commit }, payload) { //{commit}==store
      setTimeout(() => {
        commit('syncChange', payload)
        //store.commit('syncChange',payload)
      }, 1000)
    }
  },
  modules: { //5 进行模块分割
    // namespaced 能解决子模块和父模块的命名冲突文件 ，相当于增加了一个命名空间
    // 如果没有namespaced 默认getters都会被定义到父模块上，
    // mutations 会被合并在一起， 最终一起调用，有了命名空间就没有这个问题了
    // 子模块的名字不能和父模块中的状态重名
    //a, 可以通过引入使用
    a: {
      namespaced: true,//加了命名空间，就不会全触发
      state: { age1: 12,name:'aaa' },
      // state: ()=>({ age1: 12,name:'aaa' }),函数写法
      mutations: {
        syncChange(state,payload) {
          console.log('a-syncChange')
          state.age1 += payload
        }
      },
      modules:{
        c: {
          namespaced: true,//加了命名空间，就不会全触发
          state: { age2: 100 },
          getters: {
            profile (state) { return state.age2 } // -> getters['account/profile']
          },
          mutations: {
            changeAge(state, payload) {
              state.age2 += payload
            },
            syncChange() {
              console.log('c-syncChange')
            }
          },
          modules: {
            d: {
              namespaced: true,//加了命名空间，就不会全触发
              state: { age3: 200 },
              mutations:{
                syncChange() {
                  console.log('d-syncChange')
                }
              }
            }
          }
        }
      }
    }
  }
})